<template>
  <div style="padding:0 17px">
    <div>
            <span>
                <span style="color: #606266;font-size: 14px;line-height: 1;">首页</span>
                <i style="color: #c0c4cc;box-sizing: inherit;content: '\E6E0';"> > </i>
            </span>
      <span>
                <span style="color: #606266;font-size: 14px;line-height: 1;">烟感设备</span>
                <i style="color: #c0c4cc;box-sizing: inherit;content: '\E6E0';"> > </i>
            </span>
      <span>
                <span style="color: #606266;font-size: 14px;line-height: 1;">设备列表</span>
                <i></i>
            </span>
    </div>
    <div style="display: flex;margin-top: 15px;">
      <div style="padding: 10px">
        <label style="padding-right: 10px;font-weight: 700;font-size: 14px;">设备号</label>
        <el-input v-model="search" placeholder="imei" style="width: 200px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
        <label style="padding-right: 10px;font-weight: 700;font-size: 14px;">运行状态</label>
        <el-select v-model="ruleForm.sex" placeholder="运行状态" style="width: 200px;margin-right: 15px">
          <el-option label="正常状态" value="0"></el-option>
          <el-option label="故障状态" value="1"></el-option>
          <el-option label="报警状态" value="2"></el-option>
          <el-option label="过温状态" value="3"></el-option>
        </el-select>
        <label style="padding-right: 10px;font-weight: 700;font-size: 14px;">报警事件</label>
        <el-select v-model="ruleForm.sex" placeholder="报警事件" style="width: 200px;margin-right: 15px">
          <el-option label="无" value="0"></el-option>
          <el-option label="测试报警" value="1"></el-option>
          <el-option label="烟雾报警" value="2"></el-option>
        </el-select>
        <label style="padding-right: 10px;font-weight: 700;font-size: 14px;">电池状态</label>
        <el-select v-model="ruleForm.sex" placeholder="电池状态" style="width: 200px;margin-right: 15px">
          <el-option label="正常" value="0"></el-option>
          <el-option label="低电压" value="1"></el-option>
          <el-option label="欠压" value="2"></el-option>
        </el-select>
        <el-button type="primary" style="font-size: 12px;margin-right: 5px" @click="load">搜索</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;color: #909399;font-size: 12px;">
        <el-table-column prop="time" label="序号" />
        <el-table-column prop="age" label="imei" />
        <el-table-column prop="age" label="电池电压" />
        <el-table-column prop="name" label="信号" />
        <el-table-column prop="age" label="温度" />
        <el-table-column prop="age" label="运行状态" />
        <el-table-column prop="time" label="报警事件" />
        <el-table-column prop="age" label="电池状态" />
        <el-table-column prop="age" label="接警电话" />
        <el-table-column prop="name" label="安装地址" />
        <el-table-column align="center" label="操作" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ListOfSmokeSensingDevices",
  data() {
    return{
      search: '',
      tableData: [],
      ruleForm:[],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    }
  },
  methods: {
    // 搜索
    load(){

    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
  }
}
</script>

<style scoped>
:deep(.el-table th .cell)  {
  font-weight: 700
}
:deep(.el-select-dropdown__item)  {
  font-size: 13px;
}
:deep(.el-select__wrapper) {
  font-size: 13px;
}
</style>
